<template>
  <div class="top-middle-cmp">
    <div class="chart-name">
      设备完好率月趋势
      <dv-decoration-3 style="width:200px;height:20px;"></dv-decoration-3>
    </div>
    <dv-charts :option="option" />

  </div>
</template>
<script>
export default {
  name: "TopMiddleCmp",
  data() {
    return {
      option: {
        legend: {
          data: ["设备完好率"],
          testStyle: {
            fill: "#fff",
          },
        },
        
        xAxis: {
          name: "半个月",
          data: ["10/01", "10/02", "10/03", "10/04", "10/05", "10/06", "10/07", "10/08", "10/09", "10/10", "10/11", "10/12", "10/13", "10/14", "10/15"],
          boundaryGap: false, //边界间隙
          axisLine: {//坐标轴轴线相关设置。
            style: {
              stroke: "#999",
            },
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {//坐标轴刻度相关设置。
            show: false,
          },
        },
        yAxis: {
          // name: "Y数值",
          data: "value",
          splitLine: {//坐标轴在 grid 区域中的分隔线。
            show: false,
          },
          axisLine: { //坐标轴轴线相关设置。
            style: {
              stroke: "#999",
            },
          },
          axisLabel: {
            style: {
              fill: '#999'
            },
            formatter ({ value }) {
              return value.toFixed(2)
            }
          },
          axisTick: {//坐标轴刻度相关设置。
            show: false,
          },
          min: 95,
          max: 100,
          interval: 0.5
        },
        series: [{

          data: [
            99.56,
            99.66,
            99.84,
            99.11,
            99.45,
            99.44,
            99.81,
            99.84,
            99.32,
            99.14,
            99.45,
            99.15,
            99.45,
            99.64,
            99.89,
          ],
          name: "设备完好率",
          type: 'line',
          smooth: true, //光滑折线图
          lineArea: {//渐变填充折线图
            show: true,
            gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
          },
          linePoint: {//球点半径
            radius: 4,
            style: {
              fill: "#00db95",
            },
          }

        }]
      },
    };
  },
};
</script>
<style lang="less">
.top-middle-cmp {
  position: relative;
  padding: 0 50px;
  box-sizing: border-box;
  .chart-name {
    position: absolute;
    right: 70px;
    text-align: right;
    font-size: 20px;
    top: 10px;
  }
}
</style>